<template>
    <div>
        <div class="main-head flex-between container-fluid">
            <div class="title">
                <h1 v-text="$t('pro.admin.SupplySettings')"></h1>
            </div>
        </div>
        <div class="content container-fluid datatitle">
            <div class="portlet">
                <a-tabs defaultActiveKey="1">
                    <a-tab-pane :tab="$t('pro.admin.UserSupplySettings')" key="1">
                        <template>
                            <span class="userspan" v-text="$t('pro.admin.SearchUserID')"></span>
                            <a-input-search @search="handleSearch" class="userinput"/>
                        </template>
                    </a-tab-pane>
                    <a-tab-pane :tab="$t('pro.admin.DefaultSupplySettings')" key="2" forceRender>
                        <div>
                            <a-row>
                                <a-col :span="12">
                                    <div class="title">SSP NAME</div>
                                </a-col>
                                <a-col :span="12">
                                    <div class="title">
                                        <!--修改用户默认供应设置-->
                                        <router-link to="/EditUserDefaultSupplySettings">{{$t('pro.admin.UERS')}}<a-icon type="tool" /></router-link>
                                    </div>
                                </a-col>
                            </a-row>
                            <a-collapse v-model="activekey">
                                <a-collapse-panel :header="$t('pro.admin.Premiumquality')" key="1">
                                    <a-list
                                        style="padding: 0;"
                                        split
                                        border
                                        itemLayout="horizontal"
                                        :dataSource="data"
                                    >
                                        <a-list-item slot="renderItem" slot-scope="item" style="text-align: center;">

                                            <a-list-item-meta style="width: 50%;">
                                                <a slot="title" href="#">{{item.title}}</a>
                                            </a-list-item-meta>
                                            <a-list-item-meta>
                                                <a slot="title" href="#"><a-icon type="plus"/></a>
                                            </a-list-item-meta>
                                        </a-list-item>
                                    </a-list>
                                </a-collapse-panel>
                                <a-collapse-panel :header="$t('pro.admin.Lowquality')" key="2" :disabled='false'>
                                </a-collapse-panel>
                                <a-collapse-panel :header="$t('pro.admin.Uncategorized')" key="3">
                                </a-collapse-panel>
                            </a-collapse>
                        </div>
                    </a-tab-pane>
                    <a-tab-pane :tab="$t('pro.admin.SupplyRoles')" key="3">
                        <a-row type="flex" justify="space-around">
                            <a-col :span="24" :sm="24" :md="6">
                                <span class="supply-roles"  v-text="$t('pro.admin.Uncategorized')"></span>
                                <div class="supply-roles-div"></div>
                            </a-col>
                            <a-col :span="24" :sm="24" :md="6">
                                <span class="supply-roles" v-text="$t('pro.admin.Lowquality')"></span>
                                <div class="supply-roles-div"></div>
                            </a-col>
                            <a-col :span="24" :sm="24" :md="6">
                                <span class="supply-roles" v-text="$t('pro.admin.Premiumquality')"></span>
                                <div class="supply-roles-div"></div>
                            </a-col>
                        </a-row>
                    </a-tab-pane>
                </a-tabs>
            </div>
        </div>
    </div>
</template>

<script>
    import ARow from "ant-design-vue/es/grid/Row";
    const data = [
        {
            title: 'adcolony_US_EAST_adcolony(14 / 30)'
        },
        {
            title: 'adcolony_US_EAST_adcolony_ico(14 / 30)'
        },
        {
            title: 'adcolony_US_EAST_adcolony_video(0 / 30)'
        },
        {
            title: 'admixer_EU_admixer_eu(7 / 34)'
        },
        {
            title: 'admixer_EU_admixer_native(7 / 34)'
        },
        {
            title: 'admixer_US_EAST_admixer(7 / 34)'
        },
        {
            title: 'admixer_US_EAST_admixer_native(7 / 34)'
        },
        {
            title: 'admixer_US_EAST_admixer_video(8 / 14)'
        },
        {
            title: 'adview_US_EAST_adview_east(5 / 37)'
        },
        {
            title: 'adxchangemobi_US_EAST_adxchangemobi_native(0 / 13)'
        },
        {
            title: 'bidfluence_US_EAST_bidfluence_display(2 / 28)'
        },
        {
            title: 'bizzclick_US_EAST_bizzclick_premium(21 / 34)'
        },
        {
            title: 'cheetah_wls_EU_cheetahwls_europe(22 / 13)'
        },
        {
            title:'cheetah_wls_US_EAST_cheetah_wls(22 / 13)'
        },
        {
            title: 'cheetah_wls_US_EAST_cheetah_wls_video(2 / 43)'
        },
        {
            title: 'cheeta_EU_cheeta_eu(0 / 0)'
        },
        {
            title: 'cheeta_US_EAST_cheeta_native(4 / 10)'
        },
        {
            title: 'falk_US_EAST(0 / 0)'
        },
        {
            title: 'featureforward_US_EAST_featureforward(4 / 37)'
        },
        {
            title: 'huddledmasses_US_EAST_huddledmasses(0 / 48)'
        },
        {
            title: 'huddledmasses_US_EAST_huddledmasses_video(0 / 48)'
        },
        {
            title: 'imonomy_US_EAST(41 / 40)'
        },
        {
            title: 'imonomy_US_EAST_imonomy_all_demand(41 / 40)'
        },
        {
            title: 'imonomy_US_EAST_imonomy_native(41 / 40)'
        },
        {
            title: 'imonomy_US_EAST_imonomy_pop(10 / 40)'
        },
        {
            title: 'imonomy_US_EAST_imonomy_push(41 / 40)'
        },
        {
            title: 'imonomy_US_EAST_imonomy_video(41 / 40)'
        },
        {
            title: 'imonomy_US_EAST_imonomy_wl(41 / 40)'
        }
    ]
    export default {
        components: {ARow},
        data() {
            return {
                data,
                activekey: ['1'],
                grid:{
                    column: 2,
                    lg:2,
                }
            }
        },
        methods: {
            handleSearch(value) {
                console.log(value);
            }
        }
    }
</script>

<style scoped lang="less">
    .nav {
        // font-size: .8em;
        font-weight: 500;
        margin-bottom: 20px;
        > a {
            margin: 0 10px;
            padding: 10px 0;
            &::after {
                margin-top: 5px;
            }
        }
    }

    .userspan {
        display: block;
        margin-left: 10px;
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .userinput {
        width: 200px;
        margin-left: 10px;
    }

    .supply-roles-div{
        width: 100%;
        border: solid 1px #a7a7a7;
        padding: 10px;
        list-style: none;
        min-height: 150px;
        padding-left: 0;
    }
</style>
